<!--智慧消防V1.0-topHeader页面-->
<template>
    <div id="top-header">
        <dv-decoration-8 class="header-left-decoration" />
        <dv-decoration-5 class="header-center-decoration" />
        <dv-decoration-8 class="header-right-decoration" :reverse="true" />
        <div class="center-title">{{ title }}</div>
        <div class="header-right-time">
            <el-button size="mini" round type="primary" @click="enterSystem">视频系统</el-button>
            <span style="color: #fff;margin-left: 10px">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "topHeader",
    data(){
        return{
            title:"智慧消防-城市系统",
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        }
    },
    mounted() {
      this.timeFn()
    },
    methods:{
        timeFn () {
            setInterval(() => {
                this.dateDay = this.formTime(new Date(), 'HH: mm: ss');
                this.dateYear = this.formTime(new Date(), 'yyyy-MM-dd');
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000)
        },
        formTime(time,fmt){
            if (!time) return '';
            else {
                const date = new Date(time);
                const o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'H+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds(),
                    'q+': Math.floor((date.getMonth() + 3) / 3),
                    S: date.getMilliseconds(),
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(
                            RegExp.$1,
                            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
                    );
                for (const k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        fmt = fmt.replace(
                                RegExp.$1,
                                RegExp.$1.length === 1
                                        ? o[k]
                                        : ('00' + o[k]).substr(('' + o[k]).length)
                        );
                    }
                }
                return fmt;
            }
        },
        enterSystem(){
            //进入系统方法
            location.href="https://es.ys7.com/mainframe"
        }
    }
}
</script>

<style lang="less">
#top-header {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    .header-center-decoration {
        width: 40%;
        height: 40px;
        margin-top: 30px;
    }
    .header-left-decoration, .header-right-decoration {
        width: 25%;
        height: 40px;
    }
    .header-right-time{
        position: absolute;
        font-size: 14px;
        right: 0;
        top: 45px;
        color: #fff;
        transform: translateX(-10%);
    }
    .center-title {
        position: absolute;
        font-size: 24px;
        font-weight: bold;
        left: 50%;
        top: 15px;
        color: #fff;
        transform: translateX(-50%);
    }
}
</style>